<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>饼图</title>
		<script type="text/javascript" src="js/echarts.js"></script>
	</head>

	<body>
		<div id="sales" style="width: 600px;height: 400px;"></div>
		<script>
			var myCharts =
				echarts.init(document.getElementById("sales"));
			var option = {
				title: {
					text: '产品销量',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}:{c}({d}%)' //格式
				},
				legend: {
					//orient:'horizontal'
					orient: 'veritcal',
					left: 'left',
					data: ['鼠标', '键盘', 'U盘', '主板']
				},
				series: [{
					name: '所售商品',
					type: 'pie', //表示饼图
					data: [{
							value: 300,
							name: '鼠标'
						},
						{
							value: 400,
							name: '键盘'
						},
						{
							value: 200,
							name: 'U盘'
						},
						{
							value: 950,
							name: '主板'
						}
					]
				}]
			};
			myCharts.setOption(option);
		</script>
	</body>

</html>